import styles from '../index.module.less';
import { useEffect, useRef, useState } from 'react';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import {
  countUsdtNum,
  getOrderByUser,
  getUsdtNum,
  handleDirection,
  isLocal,
  isSuccess,
  jingDuNum,
  tifTypes,
} from '@/utils';
import { delOrderApi, orderListApi } from '@/api';
import dayjs from 'dayjs';
import { Button, message, Popconfirm } from 'antd';

export default function CurrentEntrust({ tableWidth }: any) {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<any>([]);
  const tableRef: any = useRef('');

  useEffect(() => {
    getData();
  }, []);

  // 请求
  async function getData() {
    const _params = {
      status: 'open',
      contract: '',
    };
    setLoading(true);
    const res: any = await orderListApi(_params);
    setLoading(false);
    console.log('res: 订单列表: ', res?.data[0]);
    if (isSuccess(res)) {
      const _list = getOrderByUser(res?.data); // 区分员工的订单
      setList(_list);
    }
  }

  const columns: ProColumns[] = [
    {
      title: '合约',
      dataIndex: 'contract',
      render: (text: any, record: any) => (
        <div
          className={`${handleDirection(record?.size > 0 ? 'color-red' : 'color-green', ['color-red', 'color-green'])}`}
        >
          {text}
        </div>
      ),
    },
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: (text: any) => <>{dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss')}</>,
    },
    {
      title: '方向',
      dataIndex: 'size',
      render: (text: any) => (
        <div
          className={`${handleDirection(text > 0 ? 'color-red' : 'color-green', ['color-red', 'color-green'])}`}
        >
          {handleDirection(text > 0 ? '做多' : '做空', ['做多', '做空'])}
        </div>
      ),
    },
    {
      title: '价格',
      dataIndex: 'price',
    },
    {
      title: '数量(USDT)',
      dataIndex: 'size',
      render: (text: any, record: any) => <div>{Math.abs(getUsdtNum(record))}</div>,
    },
    {
      title: '生效方式',
      dataIndex: 'tif',
      render: (text: any) => (
        <>
          {tifTypes[text]} <br />({text.toUpperCase()})
        </>
      ),
    },
    {
      title: '冰山委托(USDT)',
      dataIndex: 'iceberg',
      render: (text: any, record: any) => <>{text === 0 ? '-' : getUsdtNum(record, text)}</>,
    },
    {
      title: '只减仓',
      dataIndex: 'is_reduce_only',
      render: (text: any) => <>{text ? '是' : '否'}</>,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text: any, record: any) => [
        <div key="opt" style={{ marginLeft: -8 }}>
          <Popconfirm title="确认撤销吗？" onConfirm={() => deleteFn(record)}>
            <Button type="link" size="small" danger>
              撤销
            </Button>
          </Popconfirm>
        </div>,
      ],
    },
  ];

  // 撤销
  async function deleteFn(data: any) {
    const params = {
      id: data?.text,
      // id: data?.id,
    };
    // if (isLocal()) params.id = data?.text;
    console.log('params: ', params);
    const res: any = await delOrderApi(params);
    if (!isSuccess(res)) return;
    getData();
    message.success('成功');
  }

  return (
    <div className={`${styles.xxx} xxx`}>
      <br />
      <ProTable
        rowKey="id"
        columns={columns}
        dataSource={list}
        actionRef={tableRef}
        search={false}
        options={false}
        scroll={{ x: tableWidth }}
        pagination={false}
        loading={loading}
      />
    </div>
  );
}
